<template>
	<view class="timeWrapper">
		<view v-if="phone" @click="pagePhone" class="phone-img">
			<text>相册</text>
		</view>
	
		<u-time-line>
			<u-time-line-item v-for="(item,index) in list" :key="index">
				<template v-slot:content>
					<view class="content-view" @click="actionClick(item)">
						<view class="user-view">
							<children-head-view size="mini" :imgUrl="item.teacherImg" :isParent="true"></children-head-view>
							<view class="user-info">
								<text class="name">{{item.teacherName ? item.teacherName:'家长'}}</text>
								<text class="time">{{$u.timeFormat(item.created, 'yyyy-mm-dd hh:MM:ss')}}</text>
							</view>
						</view>
						<view class="more">
							<view class="title">{{item.title}}</view>
							<view class="content">{{item.content}}</view>
							<multi-media-view :mediaType="typeChange(item.videos)"  :resourceUrls="item.videos | resourceUrlFilter" class="multi-media-view"></multi-media-view>
						</view>
						
						<view v-if="showAction(item.type)" class="action" @click="actionClick(item)">
							<view>{{wrapActionTitle(item.type)}}</view>
						</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
		<u-loadmore :status="status" />

		<fab @fabClick="fabClick"></fab>
	</view>
</template>

<script>
	import {
		getTimeline
	} from '@/api/feed.js'
	import ChildrenHeadView from '@/components/children-head-view.vue'
	import MultiMediaView from '@/components/multi-media-view.vue'
	import Fab from '@/components/fab.vue'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	export default {
		components: {
			ChildrenHeadView,
			Fab,
			MultiMediaView
		},
		data() {
			return {
				status: 'loadmore',
				list: [],
				page: -1,
				phone: false
			}
		},
		filters: {
			resourceUrlFilter (value) {
				if (!value) {
					return []
				}
				return value.split('|');
			}
		},
		computed:{
			typeChange(value) {
				return (value) => {
					return value.split('.').pop() === 'mp4' ? 2 : 1
				}
			},
		},
		onLoad() {
			/*#ifdef MP-WEIXIN*/
			this.phone = true
			/*#endif*/
			this.getFeed(this.page)
		},
		onNavigationBarButtonTap(event) {
		    uni.navigateTo({
		    	url: '/pages_base/feed/album-template-photo',
		    	events: {
		    		//发布成功
		    		pushSuccessEvent: function(data) {
		    		},
		    	},
		    })
		},
		methods: {
			pagePhone() {
				uni.navigateTo({
					url: '/pages_base/feed/album-template-photo',
				})
			},
			getFeed(page) {
				getTimeline(page + 1, 5).then(res => {
					console.log(res);
					if (res.data.last) {
						this.status = 'nomore';
					}
					this.page = page + 1;
					if (this.page === 0) {
						this.list = res.data.content;
					} else {
						this.list = this.list.concat(res.data.content);
					}
				})
			},
			

			onReachBottom() {
				if (this.status === 'nomore') {
					return;
				}
				this.status = 'loading';
				this.getFeed(this.page);
			},

			fabClick() {
				let that = this;
				uni.navigateTo({
					url: '/pages_base/feed/feed-publish',
					events: {
						//发布成功
						pushSuccessEvent: function(data) {
							that.getFeed(-1);
						},
					},
				})
			},
			
			formatTime(timestamp) {
				return formatDateByTimestamp(timestamp, 'yyyy-mm-dd hh:MM:ss');
			},
			
			showAction(type) {
				if (type === 4 || type === 8 || type === 9 || type === 21 || type === 22
					|| type === 31 || type === 32) {
					return true;
				}
				return false;
			},
			
			wrapActionTitle(type) {
				if (type === 8) {
					return '查看测评报告 >>';
				}else if (type === 9 || type === 21 || type === 22) {
					return '查看报告 >>';
				}
				
				return '查看详情 >>';
			},
			
			actionClick(item) {
				const type = item.type;
				if (type === 21) {
					this.$u.route({
						url: 'pages_evaluate/evaluate/evaluate-result',
						params: {
							'evaluateRecordId': item.linkId,
						}
					})
				} else if (type === 22) {
					this.$u.route({
						url: 'pages_evaluate/evaluate/health',
						params: {
							'evaluateRecordId': item.id,
						}
					})
				} else if (type === 31) {
					//发展检表
					this.$u.route({
						url: 'pages_teach/growth/check-list-page',
						params: {
							'id': item.linkId,
						}
					})
				} else if (type === 32) {
					// 里程碑
					this.$u.route({
						url: 'pages_teach/growth/milepost-detail-page',
						params: {
							'id': item.linkId,
						}
					})
				} else if (type === 33) {
					this.$u.route({
						url: 'pages_sub/monthly/monthly-report-page',
						params: {
							type: 'preview-p',
							'id': item.linkId,
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.timeWrapper {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	
	.phone-img{
	display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 50rpx;
		
	}

	.content-view {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		color: $app-font-color;
		.user-view {
			display: flex;
			flex-direction: row;
			align-items: center;
			.user-info {
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;

				.name {
					font-weight: normal;
					font-size: 24rpx;
					color: $app-font-color;
				}

				.time {
					font-size: 16rpx;
					color: $app-font-color;
					-webkit-text-size-adjust: none;
					font-weight: lighter;
					font-family: 'PingFangSC-Regular';
					margin-top: 5rpx;
				}
			}
		}
		
		.more{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			margin-top: 20rpx;
			
			.title{
				font-size: 24rpx;
			}
			
			.content{
				font-size: 24rpx;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
			}
		}
		
		.action{
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			
			font-size: 24rpx;
		}

	}
</style>
